<template>
  <div class="product-card" @click="$emit('click')">
    <div class="product-image">
      <img :src="product.image" :alt="product.title" />
      <div class="product-category">
        {{ product.category }}
      </div>
      <!-- 销售状态标签 -->
      <div v-if="product.status" class="product-status" :class="getStatusClass(product.status)">
        {{ getStatusText(product.status) }}
      </div>
    </div>
    
    <div class="product-info">
      <h3 class="product-title">{{ product.title }}</h3>
      <p class="product-description">{{ product.description }}</p>
      
      <div class="product-price">
        ￥{{ product.price.toLocaleString() }}
      </div>
      
      <div class="product-actions">
        <el-button type="primary" size="small" @click.stop="handleContact">
          联系卖家
        </el-button>
        <el-button type="success" size="small" @click.stop="handleAddToCart">
          加入购物车
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { addToCart } from '@/api/cart.js'

const props = defineProps({
  product: {
    type: Object,
    required: true,
    default: () => ({
      id: 0,
      title: '',
      price: 0,
      image: '',
      description: '',
      category: ''
    })
  }
})

const emit = defineEmits(['click'])

const handleContact = () => {
  ElMessage.success('联系卖家成功')
}

const handleAddToCart = async () => {
  try {
    const response = await addToCart({ product: props.product.id })
    
    if (response && response.code === 200) {
      ElMessage.success('商品已加入购物车')
    } else {
      ElMessage.error('加入购物车失败')
    }
  } catch (err) {
    console.error('加入购物车失败:', err)
    ElMessage.error('加入购物车失败，请稍后重试')
  }
}

// 获取销售状态对应的CSS类
const getStatusClass = (status) => {
  switch (status) {
    case '在售':
      return 'status-onsale'
    case '已售':
      return 'status-sold'
    default:
      return 'status-other'
  }
}

// 获取销售状态显示文本
const getStatusText = (status) => {
  switch (status) {
    case '在售':
      return '在售'
    case '已售':
      return '已售'
    default:
      return status
  }
}
</script>

<style scoped>
.product-card {
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  overflow: hidden;
  background: white;
  transition: all 0.3s ease;
  cursor: pointer;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  border-color: #409EFF;
}

.product-image {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.product-card:hover .product-image img {
  transform: scale(1.05);
}

.product-category {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(64, 158, 255, 0.9);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.product-status {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  color: white;
}

.product-status.status-onsale {
  background: rgba(76, 175, 80, 0.9); /* 绿色 - 在售 */
}

.product-status.status-sold {
  background: rgba(244, 67, 54, 0.9); /* 红色 - 已售 */
}

.product-status.status-other {
  background: rgba(158, 158, 158, 0.9); /* 灰色 - 其他状态 */
}

.product-info {
  padding: 16px;
}

.product-title {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  line-height: 1.4;
}

.product-description {
  margin: 0 0 12px 0;
  color: #666;
  font-size: 14px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-price {
  margin: 0 0 16px 0;
  font-size: 20px;
  font-weight: bold;
  color: #e74c3c;
}

.product-actions {
  display: flex;
  gap: 8px;
}

.product-actions .el-button {
  flex: 1;
}
</style>